<template>
    <div class="container">
        <div class="card">
            <el-breadcrumb separator="/" class="card-body">
                <el-breadcrumb-item :to="{ path: '/AdminHome' }"><i class="el-icon-location"></i>首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/SystemSetting/Supplier' }">供应商管理</el-breadcrumb-item>
                <el-breadcrumb-item>{{ this.$route.meta.title }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="card">
            <div class="card-header">填写供应商信息</div>
            <div class="card-body">
                <el-form ref="infoForm" :model="form" :rules="rules" label-width="120px">
                <div class="info-ruleForm">
                    <el-form-item label="供应商编号" prop="code">
                        <el-input v-model="form.code" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="公司名称" prop="name">
                        <el-input v-model="form.name" maxlength="50"></el-input>
                    </el-form-item>
                    <el-form-item label="业务描述" prop="businessDesc">
                        <el-input type="textarea" v-model="form.businessDesc" maxlength="150"></el-input>
                    </el-form-item>
                    <el-form-item label="供应商地址" prop="address">
                        <el-input v-model="form.address"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人" prop="contactName">
                        <el-input v-model="form.contactName" maxlength="30"></el-input>
                    </el-form-item>       
                    <el-form-item label="联系电话" prop="contactMobile">
                        <el-input v-model="form.contactMobile" maxlength="15"></el-input>
                    </el-form-item>      
                    <el-form-item label="联系邮箱" prop="contactEmail">
                        <el-input v-model="form.contactEmail" maxlength="30"></el-input>
                    </el-form-item>   
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="form.remark" maxlength="200"></el-input>
                    </el-form-item>   
                </div>
                <hr>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit('infoForm')" :disabled="disabled">立即保存</el-button>
                    <el-button @click="goBack">返回上一级</el-button>
                </el-form-item>
                </el-form>
            </div>
        </div>
        {{ form }}
    </div>
</template>

<script>
import request from "@/utils/request";
export default {
  name: "SupplierCreate",
  data() {
    return {
      disabled:false,

      form: {
        address: "",
        businessDesc: "",
        code: "",
        contactEmail: "",
        contactMobile: "",
        contactName: "",
        name: "",
        remark: ""
      },
      rules: {
        code: [
          { required: true, message: "获取编码失败", trigger: "blur" }
        ],
        address: [
          { required: true, message: "请输入公司地址", trigger: "blur" },
          { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
        ],
        businessDesc: [
          { required: true, message: "请输入业务描述", trigger: "blur" },
          { min: 1, max: 150, message: "长度在 1 到 150 个字符", trigger: "blur" }
        ],
        contactEmail: [
          { required: true, message: "请输入联系邮箱", trigger: "blur" },
          { min: 1, max: 30, message: "长度在 1 到 50 个字符", trigger: "blur" }
        ],
        contactMobile: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          { min: 4, max: 15, message: "请输入1 到 50 数字", trigger: "blur" }
        ],
        contactName: [
          { required: true, message: "请输入联系人姓名", trigger: "blur" },
          { min: 1, max: 15, message: "长度在 1 到 15 个数字", trigger: "blur" }
        ],
        name: [
          { required: true, message: "请输入公司名字", trigger: "blur" },
          { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    onSubmit(formName) {
      this.disabled = true;
      this.$refs[formName].validate(valid => {
        if (valid) {
          request({
            method: "post",
            url: this.$api.createSupplier,
            data: this.form
          }).then(res => {
            this.$message.success("保存成功!");
            // this.goBack();
          });
        } else {
          this.disabled = false;
          return false;
        }
      });
    },
    goBack() {
      this.$router.go(-1);
    },
    getCode() {
      request({
        method: "get",
        url: this.$api.getSupplierGenerateCode
      }).then(res => {
        this.form.code = `GYS` + res.data;
      });
    }
  },
  mounted() {
    //初始化
    this.getCode();
  }
};
</script>

<style scoped>
</style>